<template>
    <div class="bc-select" @click.stop="toggleMenu">
        <bc-input v-model="label" clear suffix ref="reference" readonly placeholder="请选择">
            <template v-slot:suffix>
                <i ref="selectIcon" class="bc-icon icon-bc-unfold" style="display:inline-block;
                transition:transform 0.5s" :style="{'transform': iconRotate}"></i>
            </template>
        </bc-input>
        <transition name="bc-select-menu-fade">
            <div v-dom-portal="domPortal" class="bc-select-menu bc-select-triangle bc-select-bottom-middle" v-if="dropdown" :style="posStyle">
                <ul class="bc-select-dropdown__list">
                    <slot></slot>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
import bus from './bus.js'
import BcInput from '@/components/input/src/input.vue'
export default {
    components: {
        BcInput
    },
    name: 'BcSelect',
    provide() {
      return {
        'select': this.opValue
      }
    },
    props: {
        options: {
            type: Array,
            default: () => []
        },
        domPortal: {
            type: Boolean,
            default: false
        }
    },
    created() {
        bus.$on('handleOptionClick', this.handleOptionSelect);
    },
    data() {
        return {
            dropdown: false,
            show: false,
            label: '',
            opValue: {
                value: ''
            },
            pos: {
                left: 0,
                top: 0,
                height: 36
            }
        }
    },
    computed: {
        iconRotate() {
            if(this.dropdown) return "rotate(180deg)";
            return '';
        },
        posStyle() {
            if (this.domPortal) {
                let scrollTop = document.documentElement.scrollTop;
                return {
                    'left': this.pos.left + 'px',
                    'top': scrollTop + this.pos.top + this.pos.height + 12 + 'px',
                    'z-index': 200
                }
            } else {
                return {
                    'left': 0,
                    'top': this.pos.height + 12 + 'px'
                }
            }
        }
    },
    methods: {
        toggleMenu () {
            this.dropdown = !this.dropdown;
            this.getPostion();
        },
        handleOptionSelect (selected) {
            this.dropdown = selected[1];
            this.label = selected[0].label || '';
            this.opValue.value = selected[0].value || '';
            this.$emit("change", selected[0]);
        },
        getPostion () {
            const pos = this.$refs.reference.$el.getBoundingClientRect();
            const {left, top, height} = pos;
            this.pos = {left, top, height};
        }
    },
    mounted() {
        document.addEventListener('click', () => {this.dropdown = false});
    }
}
</script>

<style scoped>
.bc-select {
    position: relative;
    display: inline-block;
}
.bc-select-menu {
    position: absolute;
    width: 200px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(92, 25, 25, 0.4);
    box-sizing: border-box;
}
.bc-select-menu .bc-select-dropdown__list {
    padding: 6px 0;
    list-style: none;
}
.bc-select-menu-fade-enter-active,
.bc-select-menu-fade-leave-active {
  transition: opacity .5s;
}
.bc-select-menu-fade-enter,
.bc-select-menu-fade-leave-to {
   opacity: 0;
}
.bc-select-triangle::after {
    content: '';
    position: absolute;
    border: 6px solid white;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.bc-select-triangle::before {
    content: '';
    position: absolute;
    border: 6px solid rgb(172,172,172);
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.bc-select-bottom-middle::before {
    top: -12px;
    border-bottom-color: #000;
    left: calc(50% - 6px);
}
.bc-select-bottom-middle::after {
    top: -11px;
    border-bottom-color: #fff;
    left: calc(50% - 6px);
}
</style>